<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>常用工具</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <bread-crumb-back></bread-crumb-back> -->
        </div>
        <div class="content-box">
            <div style="text-align:center; margin-top:5%;" v-if="listTableData.length == 0">
                <img src="./../../assets/images/project_tips3.jpg" />
            </div>
            <div class="tool-table" v-for="(item, index) in listTableData" v-if="listTableData.length>0">
                <div class="table-title">{{ item.toolsTitle }}</div>
                <table>
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>介绍</th>
                            <th>版本</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td :rowspan="item.versionList.length">{{ item.toolsName }}</td>
                            <td :rowspan="item.versionList.length">{{ item.toolsContent }}</td>
                            <td v-if="item.versionList.length > 0">{{ item.versionList[0].toolsVersionName}}</td>
                            <td v-if="item.versionList.length > 0">
                                <a class="downVersion" :href="'/dataplatform/common/fileDownload?path='+encodeURIComponent(item.versionList[0].toolsVersionFile)+'&type=2'">下载</a>
                            </td>
                            <td v-else colspan="2">暂无版本</td>
                        </tr>
                        <tr v-for="(item2, index2) in item.versionList" v-if="index2 > 0">
                            <td v-if="index2 >0">{{ item2.toolsVersionName }}</td>
                            <td v-if="index2 >0">
                                <a class="downVersion" :href="'/dataplatform/common/fileDownload?path='+encodeURIComponent(item2.toolsVersionFile)">下载</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <el-pagination
                v-if="listTableData.length > 0"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount"
                style="margin-top: 20px; text-align: center;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            return {
                listTableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000
            }
        },
        created () {
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/basis/functions/tools/ts/commonToolsList?pageNum='+self.currentPage+'&pageSize='+self.pagesize).then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        self.listTableData = res.data.page.list
                        if (self.listTableData.length == 0) {
                            $('.content-box').height($('.content-container').height() - 150)
                        }
                        self.totalCount = res.data.page.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            }
        }
    }
</script>
